<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery ajax实例点击按钮触发Ajax loading加载提示效果</title>
<meta name="jquery ajax实例制作简单的通过点击删除按钮触发Ajax loading加载提示，来进行删除内容的过程。" />
</head>
<body>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#load').hide();
});

$(function(){
	$(".delete").click(function(){
		$('#load').fadeIn();
		var commentContainer = $(this).parent();
		var id = $(this).attr("id");
		var string = 'id='+ id ;
		$.ajax({
			type: "POST",
			url: "delete.php",
			data: string,
			cache: false,
			success:function(){
				commentContainer.slideUp('slow',function(){
					$(this).remove();
				});
				$('#load').fadeOut();
			}
		});
		return false;
	});
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:Arial, Helvetica, sans-serif;font-size:13px;}
#container{width:480px;margin:20px auto;}
#container h3{font-size:14px;height:32px;}
#container p{line-height:28px;padding:0 0 10px 0;}
/* .box */
.box{padding:3px;background-color:#dedede;margin-bottom:3px;border-bottom:2px solid #ccc;width:450px;height:90px;}
.box:hover{background-color:#ccc;}
.box .avatar{float:left;margin-right:20px;}
.box .text{float:left;width:300px;font-size:13px;}
.box .text span{font-size:18px;line-height:23px;font-weight:700;}
.box .delete{margin-top:30px;float:left;margin-left:30px;}
.box a.delete{padding:3px;text-align:center;font-size:18px;font-weight:700;text-decoration:none;color:#C00;}
.box a.delete:hover{background-color:#900;color:#FFF;}
.box .date{padding-top:10px;font-weight:700;color:#333;font-size:12px;}
#load{position:absolute;left:43%;top:100px;background:url(images/loading-bg.png) no-repeat 50% 50%;width:159px;color:#999;font-size:18px;height:40px;font-weight:300;padding-top:14px;}
</style>

<div id="container">
	<h3>删除评论</h3>
	<p>单击x删除评论</p>

	<div class="box">
		<img src="images/avatar.png" width="75" height="75" border="0" class="avatar"/>
		<div class="text">
			<span>阿什利·福特</span><br/>这是我第一次在这里发表评论!哦,我很喜欢这里
			<div class="date">2009年7月17日</div>
		</div>
		<a href="javascript:void(0);" id="1" class="delete">x</a>
		<div class="clear"></div>
	</div>
	
	<div class="box">
		<img src="images/avatar.png" width="75" height="75" border="0" class="avatar"/>
		<div class="text">
			<span>阿什利·福特</span><br/>这是我第一次在这里发表评论!哦,我很喜欢这里
			<div class="date">2009年7月17日</div>
		</div>
		<a href="javascript:void(0);" id="2" class="delete">x</a>
		<div class="clear"></div>
	</div>
	
	<div class="box">
		<img src="images/avatar.png" width="75" height="75" border="0" class="avatar"/>
		<div class="text">
			<span>阿什利·福特</span><br/>这是我第一次在这里发表评论!哦,我很喜欢这里
			<div class="date">2009年7月17日</div>
		</div>
		<a href="javascript:void(0);" id="3" class="delete">x</a>
		<div class="clear"></div>
	</div>

	<div id="load" align="center"><img src="images/loading.gif" width="28" height="28" align="absmiddle"/>加载中...</div>

</div>


</body>
</html>